<template>
  <div class="p-2">
    <!-- 添加或修改配置参数对话框 -->
<!--    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">-->
<!--      <el-tab-pane label="基础参数" :name="0"/>-->
<!--&lt;!&ndash;      <el-tab-pane label="设备配置" :name="1"/>&ndash;&gt;-->
<!--      <el-tab-pane label="商家配置" :name="2"/>-->
<!--      <el-tab-pane label="支付开关配置" :name="3"/>-->
<!--    </el-tabs>-->
      <el-form ref="parameterFormRef" :model="form" :rules="rules" label-width="200px">

        <!-- 基础参数-->
<!--        <el-row v-if="activeName == 0">-->
          <el-col :span="12">
            <el-form-item label="平台名称" prop="mallName">
              <el-input v-model="form.mallName" placeholder="请输入平台名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="平台客服电话" prop="mallTelphone" >
              <el-input v-model="form.mallTelphone" placeholder="请输入平台客服电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据大屏标题" prop="dataViewTitle" >
              <el-input v-model="form.dataViewTitle" placeholder="数据大屏标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首页CSS样式" prop="firstPageFilterCss" >
              <el-input v-model="form.firstPageFilterCss" placeholder="首页CSS样式" />
            </el-form-item>
          </el-col>

<!--        </el-row>-->
        <!--      设备配置-->
<!--        <el-row v-if="activeName == 1">-->


<!--        </el-row>-->
        <!--      商家配置-->
<!--        <el-row v-if="activeName == 2">-->
<!--          <el-col :span="24">-->
<!--            <el-form-item label="是否显示商家入驻入口" prop="isShowMer" style="width:50%">-->
<!--              <el-radio-group v-model="form.isShowMer"  >-->
<!--                <el-radio :value="0" :label="0">关闭</el-radio>-->
<!--                <el-radio :value="1" :label="1">开启</el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

<!--          <el-col :span="24">-->
<!--            <el-form-item label="是否开启提现" prop="isOpenCash" style="width:50%">-->
<!--              <el-radio-group v-model="form.isOpenCash"  >-->
<!--                <el-radio :value="0" :label="0">关闭</el-radio>-->
<!--                <el-radio :value="1" :label="1">开启</el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
<!--          </el-col>-->


<!--          <el-col :span="24" v-if="form.isOpenCash === 1">-->
<!--            <el-form-item label="最低提现金额" prop="minCashMoney" >-->
<!--              <el-input v-model="form.minCashMoney" placeholder="请输入最低提现金额" style="width:200px;">-->
<!--                <template slot="append">元</template>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

<!--        </el-row>-->
        <!--      支付开关配置-->
<!--        <el-row v-if="activeName == 3">-->
<!--          <el-col :span="24">-->
<!--            <el-form-item label="商品/服务支付平台" prop="productPayPlatform" style="width:50%">-->
<!--              <el-radio-group v-model="form.productPayPlatform"  >-->
<!--                <el-radio :value="0" :label="0">微信支付</el-radio>-->
<!--                <el-radio :value="1" :label="1">农商行-银联</el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

      </el-form>
      <div class="dialog-footer" style="text-align: center;">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<!--        <el-button @click="cancel">取 消</el-button>-->
      </div>
  </div>
</template>

<script setup name="Parameter" lang="ts">
import {  getParameter,  addParameter, updateParameter } from '@/api/module/parameter';
import {  ParameterQuery, ParameterForm } from '@/api/module/parameter/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const buttonLoading = ref(false);
const activeName = ref(0)

const parameterFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: ParameterForm = {
  id: undefined,
  mallName: undefined,
  mallTelphone: undefined,
  mallAddress: undefined,
  mallLongitude: undefined,
  mallLatitude: undefined,
  isDefault: undefined,
  dataViewTitle: undefined,
  accessToken: undefined,
  acLastTime: undefined,
  accessTokenMp: undefined,
  acMpLastTime: undefined,
  isShowMer: undefined,
  isShowSearch: undefined,
  isShowNewGift: undefined,
  isOpenCash: undefined,
  minCashMoney: undefined,
  isOpenRecharge: undefined,
  isOpenRegCash: undefined,
  payPlatform: undefined,
  productPayPlatform: undefined,
  firstPageFilterCss: undefined,
  uavGroupId:undefined,
  uavAk:undefined,
  uavSk:undefined,
}
const data = reactive<PageData<ParameterForm, ParameterQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    mallName: undefined,
    mallTelphone: undefined,
    mallAddress: undefined,
    mallLongitude: undefined,
    mallLatitude: undefined,
    isDefault: undefined,
    dataViewTitle: undefined,
    accessToken: undefined,
    acLastTime: undefined,
    accessTokenMp: undefined,
    acMpLastTime: undefined,
    isShowMer: undefined,
    isShowSearch: undefined,
    isShowNewGift: undefined,
    isOpenCash: undefined,
    minCashMoney: undefined,
    isOpenRecharge: undefined,
    isOpenRegCash: undefined,
    payPlatform: undefined,
    productPayPlatform: undefined,
    firstPageFilterCss: undefined,
    params: {
    }
  },
  rules: {
    id: [
      { required: true, message: "不能为空", trigger: "blur" }
    ],
    mallName: [
      { required: true, message: "不能为空", trigger: "blur" }
    ],
    mallTelphone: [
      { required: true, message: "不能为空", trigger: "blur" }
    ],
    mallAddress: [
      { required: true, message: "不能为空", trigger: "blur" }
    ],
    mallLongitude: [
      { required: true, message: "不能为空", trigger: "blur" }
    ],
    mallLatitude: [
      { required: true, message: "不能为空", trigger: "blur" }
    ],
    isDefault: [
      { required: true, message: "不能为空", trigger: "blur" }
    ],
    dataViewTitle: [
      { required: true, message: "数据大屏页面的标题不能为空", trigger: "blur" }
    ],
    accessToken: [
      { required: true, message: "小程序的 不能为空", trigger: "blur" }
    ],
    acLastTime: [
      { required: true, message: "不能为空", trigger: "blur" }
    ],
    accessTokenMp: [
      { required: true, message: "公众号的不能为空", trigger: "blur" }
    ],
    payPlatform: [
      { required: true, message: "备用不能为空", trigger: "blur" }
    ],
    productPayPlatform: [
      { required: true, message: "商品支付 平台 0 - 微信  1 - 农商行不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);



const handleClick = (val) => {
  queryParams.value.pageNum = 1;
  console.log("handleClick",val);
  activeName.value = val.name;
};


/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
  form.value = {...initFormData};
  parameterFormRef.value?.resetFields();
}


/** 修改按钮操作 */
const handleUpdate = async () => {
  const res = await getParameter(1);
  Object.assign(form.value, res.data);
}

/** 提交按钮 */
const submitForm = () => {
  parameterFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateParameter(form.value).finally(() =>  buttonLoading.value = false);
      } else {
        await addParameter(form.value).finally(() =>  buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      dialog.visible = false;
      handleUpdate();
    }
  });
}


onMounted(() => {
  handleUpdate();
});
</script>
